<template>
    <div id="bar-container"  ref="chart" style="height:100%;width: 100%;"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    props:{
        datacounts:Object
    },
    data(){
        return{
            dailyData : []
        }
    },
    watch: {
        datacounts(newVal, oldVal) {
         console.log(newVal, oldVal); // 打印出 props 数据的新旧值
         this.dailyData = newVal.dailyData
         console.log(this.dailyData);
          
            this.initEchart();
    }
    },
    mounted(){
        this.chart = echarts.init(this.$refs.chart);
    },
    created() {
    this.resizeChart = () => {
        this.chart.resize();
    };
    window.addEventListener('resize', this.resizeChart);
    },
    beforeUnmount() {
    window.removeEventListener('resize', this.resizeChart);
    },
    methods:{
        initEchart() {
     
            var chartDom = document.getElementById("bar-container");
            var myChart = echarts.init(chartDom);
            var option;
            option = {
            legend: {},
            tooltip: {},
           
            dataset: {
                source: [
            ['七日内', '总共', '进行中', '已完成'],
                ...this.formatData()
            ]
            },
            xAxis: { type: 'category' },
            yAxis: {},
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
            };
            option && myChart.setOption(option);
        },
        formatData() {
            console.log(this.dailyData)
            
            return this.dailyData.map((item) => [
                item.weekday.charAt(0).toUpperCase() + item.weekday.slice(1),
                item.tasks.total,
                item.tasks.doing,
                item.tasks.finished
            ]);
            }
    }
}
</script>

<style>

</style>